<template>
  <div class="app-container">
    <el-card shadow="always">
      <div class="chart-container">
        <div class="chart-header">
          <h3>各月劳务人员薪资统计</h3>
          <div class="year-selector">
            <el-form :inline="true" :model="formInline" class="demo-form-inline">
              <el-form-item label="选择年份:">
                <el-select v-model="selectedYear" placeholder="请选择年份" @change="list">
                  <el-option
                    v-for="year in availableYears"
                    :key="year"
                    :label="year"
                    :value="year">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-form>
          </div>
          <div class="total-salary">
            <p>当前年份总薪资: {{ totalSalary }} 元</p>
          </div>
        </div>
        <div class="echart-container">
          <el-card shadow="never">
            <div class="echart" id="mychart" :style="{ width: '100%', height: '500px' }"></div>
          </el-card>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
import * as echarts from "echarts";
import { getSalaryCount } from "@/api/ldcm/salaryrecords";

export default {
  name: "各月劳务人员薪资统计",
  data() {
    return {
      selectedYear: new Date().getFullYear(), // 默认选择当前年份
      availableYears: [], // 可供选择的年份列表，可以根据实际情况动态生成
      myChart: null,
      totalSalary: 0 // 用于存储当前年份的总薪资
    };
  },
  mounted() {
    this.$nextTick(() => {
      this.list();
    });
  },
  methods: {
    list() {
      getSalaryCount().then(res => {
        if (res.code === 200) {
          this.zhuzhuangtu(res.data);
        } else {
          // 验证失败
          this.zhuzhuangtu([]);
        }
      });
    },
    zhuzhuangtu(data) {
      // 过滤出选择年份的数据
      const filteredData = data.filter(item => item.year === this.selectedYear);
      this.availableYears = Array.from(new Set(data.map(item => item.year)));
      // 计算当前年份的总薪资
      this.totalSalary = filteredData.reduce((sum, item) => sum + item.totalSalary, 0);

      // 参数拼接
      var datas = [];
      var xData = [];
      if (filteredData.length === 0) {
        datas.push(0, 0,0,0,0,0,0,0,0,0,0,0);
        xData.push("1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月");
      } else {
        for (let i = 0; i < filteredData.length; i++) {
          var item = {
            value: filteredData[i].totalSalary,
          };
          var items = filteredData[i].month.toString().padStart(2, '0'); // 确保月份格式为两位数
          datas.push(item.value);
          xData.push(items);
        }
      }

      // 基本柱状图
      const option = {
        title: {
          text: '各月劳务人员薪资柱形图',
          subtext: `年份: ${this.selectedYear}`,
          left: 'center',
          textStyle: {
            color: '#333',
            fontSize: 18,
            fontWeight: 'bold'
          }
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        xAxis: {
          type: 'category',
    data: xData,
    name: '月份',
    nameLocation: 'end', // 将名称显示在末尾
    nameGap: 30,
    nameTextStyle: {
      color: '#333', // 更深的颜色
      fontSize: 14 // 增加字体大小
    },
    axisLabel: {
      interval: 0, // 强制显示所有标签
      rotate: 45, // 旋转标签以避免重叠
      color: '#333', // 更深的颜色
      fontSize: 12 // 增加字体大小
    },
    axisLine: {
      lineStyle: {
        color: '#666' // 更深的颜色
      }
    }
        },
        yAxis: {
    type: 'value',
    name: '总薪资 (元)',
    nameLocation: 'end', // 将名称显示在末尾
    nameGap: 30,
    nameTextStyle: {
      color: '#333', // 更深的颜色
      fontSize: 14 // 增加字体大小
    },
    axisLabel: {
      color: '#333', // 更深的颜色
      fontSize: 12 // 增加字体大小
    },
    axisLine: {
      lineStyle: {
        color: '#666' // 更深的颜色
      }
    }
  },
        series: [
          {
            name: '总薪资',
            type: 'bar',
            barWidth: '60%',
            data: datas,
            itemStyle: {
              color: new echarts.graphic.LinearGradient(
                0, 0, 0, 1,
                [
                  { offset: 0, color: '#83bff6' },
                  { offset: 0.5, color: '#188df0' },
                  { offset: 1, color: '#188df0' }
                ]
              ),
              borderRadius: [5, 5, 0, 0]
            },
            label: {
              show: true,
              position: 'top',
              formatter: '{c}',
              color: '#333'
            }
          }
        ],
        grid: {
          left: '3%',
          right: '4%',
          bottom: '10%',
          containLabel: true
        },
        backgroundColor: '#f9f9f9'
      };

      if (!this.myChart) {
        this.myChart = echarts.init(document.getElementById("mychart"));
      }
      this.myChart.setOption(option);

      // 随着屏幕大小调节图表
      window.addEventListener("resize", () => {
        this.myChart.resize();
      });
    }
  }
};
</script>

<style scoped>
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
  background-color: #fff;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
}

.year-selector {
  display: flex;
  align-items: flex-start;
  justify-content: right;
  margin-bottom: 20px;
}

.year-selector label {
  font-weight: bold;
  margin-right: 10px;
  font-size: 16px;
}

.year-selector select {
  padding: 8px;
  font-size: 14px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.echart-container {
  background-color: #fff;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  margin-bottom: 20px;
}

.total-salary {
  text-align: center;
  font-size: 18px;
  font-weight: bold;
  color: #333;
}
</style>
